<template>
	<view class="login">
		<!-- <mine-head title="" backIconColor="#fff" :background="background" titleColor="#fff" :borderBottom="false"></mine-head> -->
		<view class="con">
			<view class="title">
				手机号登录或注册
			</view>
			<view class="input-box">
				<!-- <view class="fl tel _df _ac" @click="showTel">
					<span>{{tel}}</span>
					<u-icon name="arrow-down-fill" color="#111111" size="16" style="margin: 0 10rpx 0 6rpx;"></u-icon>
				</view> -->
				<u-form :model="form" ref="uForm" class="form">
					<u-form-item label="" prop="mobile">
						<u-input placeholder="请输入手机号" type="number" fontSize="32" color="#000" v-model="form.mobile">
							
						</u-input>
					</u-form-item>
				</u-form>
			</view>
			
			<view class="btn" @click="getCode">
				{{tips}}
			</view>
			<view class="btn" @click="gotoCode" v-if="showBtn">
				去登录
			</view>
			<u-toast ref="uToast"></u-toast>
			<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
					@change="codeChange"></u-verification-code>
			<!-- <u-code 
				:seconds="seconds" 
				@end="end" 
				@start="start" 
				ref="uCode" 
				@change="codeChange"
				:keepRunning="true"
				uniqueKey="page-a"
			></u-code> -->
			<!-- <view class="txt" @click="getPhone">
				本机号码登录
			</view> -->
		</view>
		<u-picker 
		mode="selector" 
		v-model="show"
		:range="columns"
		itemHeight="60"
		@confirm="pickerFn"
		@cancel="pickerCancel"
		></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tel:'+86',
				show:false,
				columns: ['+86', '+0873', '+18'],
				form:{
					mobile:''
				},
				background:{
					backgroundColor: 'transparent'
				},
				rules: {
					mobile: [
						{ 
							required: true, 
							message: '请输入手机号', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						},
						{
							pattern: /^1[345789]\d{9}$/,
							message: '请输入正确的手机号',
							trigger: 'change',
						  }
					],
					
					
				},
				seconds:60,
				tips:'',
				showBtn:false,
				pathType:1
			};
		},
		watch:{
			pathType(v){
				this.pathType = v
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			
		},
		onLoad(options) {
			console.log(options)
			if(options.pathType){
				this.pathType = options.pathType
			}
		},
		methods:{
			showTel(){
				this.show = true
			},
			back(){
				uni.navigateBack(-1)
			},
			gotoCode(){
				uni.navigateTo({
					url:'/pages/login/code?phone=' + this.form.mobile + '&pathType=' + this.pathType
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(!this.form.mobile){
					uni.$u.toast('请输入手机号');
					return
				}
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.sendCode()
					// setTimeout(() => {
					// 	uni.hideLoading();
					// 	// 这里此提示会被this.start()方法中的提示覆盖
					// 	uni.$u.toast('验证码已发送');
					// 	// 通知验证码组件内部开始倒计时
					// 	this.showBtn = true
					// 	this.$refs.uCode.start();
					// 	uni.navigateTo({
					// 		url:'/pages/login/code?phone=' + this.form.mobile
					// 	})
					// }, 2000);
					
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			sendCode(){
				let that = this
				let p = that.form.mobile
				uni.$_post({
					url: "sendCode",
					that: that,
					params: p,
					success(res) {
						console.log(res)
						let data = res.data;
						if(res.code == 0){
							uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								uni.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								setTimeout(()=>{
									uni.navigateTo({
										url:'/pages/login/code?phone=' + that.form.mobile + '&pathType=' + that.pathType
									})
									that.showBtn = true
									that.$refs.uCode.start();
								},1000)
							
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			end() {
				// uni.$u.toast('倒计时结束');
			},
			start() {
				// uni.$u.toast('倒计时开始');
			},
			pickerFn(e){
				this.tel = this.columns[e]
				this.show = false
			},
			pickerCancel(){
				this.show = false
			},
			
			// 获取用户同意访问通讯录
			getPhone() {
				
				
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-back-wrap{
		background: url(@/static/img/common/topBack.png) no-repeat center / 40rpx 40rpx;
	}
	.login{
		width: 100%;
		height: 100vh;
		padding: 250rpx 30rpx;
		box-sizing: border-box;
		background: url(../../static/img/index/login_bg.png) no-repeat center / cover;
		.con{
			padding: 0 50rpx;
		}
		.back{
			margin-bottom: 70rpx;
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.title{
			font-size: 64rpx;
			font-family: $uni-font-family-Heavy;
			text-align: center;
			color: #111111;
			margin-bottom: 120rpx;
		}
		.tel{
			font-size: 36rpx;
			font-family: $uni-font-family-Heavy;
			color: #111111;
			height: 100rpx;
			margin-right: 10rpx;
		}
		.form{
			
			overflow: hidden;
		}
		.input-box{
			background-color: #fff;
			height: 100rpx;
			padding-left: 36rpx !important;
			border-radius: 50rpx;
			overflow: hidden;
			margin-bottom: 50rpx;
		}
		/deep/.u-input{
			background-color: #fff;
			height: 100rpx;
			border: none;
			// padding-left: 36rpx !important;
		}/deep/.u-input__input{
			height: 100rpx;
			line-height: 100rpx;
			font-size: 32rpx;
		}
		
		/deep/.u-form-item{
			padding: 0;
		}
		.btn{
			height: 100rpx;
			width: 100%;
			line-height: 100rpx;
			background: #5a64c5;
			border-radius: 50rpx;
			font-size: 32rpx;
			font-family: $uni-font-family-Medium;
			text-align: center;
			color: #ffffff;
			margin-bottom: 40rpx;
		}
		.txt{
			font-size: 24rpx;
			font-family: $uni-font-family-Medium;
			text-align: center;
			color: #999;
		}
	}
</style>
